import React, { Component } from 'react'
import {Button, Input, Form} from 'element-react'
import {withRouter} from 'react-router-dom'
import Breadcrumb from '../base/Breadcrumb'
import {FormWrapper} from '../base/BaseStatic'
import styled from 'styled-components'

class operatingRecord extends Component {
  constructor (props) {
    super(props)
    this.state = {
      // 表单数据
      form: {
        userID: null,
        orderID: null,
        applyType: null,
        refundReason: null,
        refundContent: null,
        refundAmount: null,
        userNote: null,
        certificateImg: [],
        returnType: null,
        shipmentNumber: null
      },
      formEdit: {
        reviewer: null,
        reviewStatus: null,
        reviewNote: null
      }
    }
  }
  render () {
    const ImageWrapper = styled.div`
      display: flex;
      flex-wrap: wrap;
      width: 438px;
      img {
        display: block;
        width: 140px;
        height: 140px;
        margin: 2px;
        border: 1px solid #D3DCE6;
        border-radius: 4px;
      }
    `
    return (
      <div>
        <Breadcrumb data={['售后', '编辑售后申请']}/>
        {/* 表单 */}
        <FormWrapper model={this.state.form} labelWidth="80">
          <Form.Item label="* 会员ID"><Input value={this.state.form.userID} disabled></Input></Form.Item>
          <Form.Item label="* 订单号"><Input value={this.state.form.orderID} disabled></Input></Form.Item>
          <Form.Item label="* 申请类型"><Input value={this.state.form.applyType} disabled></Input></Form.Item>
          <Form.Item label="* 退款原因"><Input value={this.state.form.refundReason} disabled></Input></Form.Item>
          <Form.Item label="* 退款内容"><Input value={this.state.form.refundContent} disabled></Input></Form.Item>
          <Form.Item label="* 退款金额"><Input value={this.state.form.refundAmount} disabled></Input></Form.Item>
          <Form.Item label="用户备注"><Input value={this.state.form.userNote} disabled></Input></Form.Item>
          <Form.Item label="图片凭证">
            <ImageWrapper>
              <img src={require('../../assets/images/logo.png')} />
              <img src={require('../../assets/images/logo.png')} />
              <img src={require('../../assets/images/logo.png')} />
              <img src={require('../../assets/images/logo.png')} />
              <img src={require('../../assets/images/logo.png')} />
            </ImageWrapper>
          </Form.Item>
          <Form.Item label="退回方式"><Input value={this.state.form.returnType} disabled></Input></Form.Item>
          <Form.Item label="物流单号"><Input value={this.state.form.shipmentNumber} disabled></Input></Form.Item>
        </FormWrapper>
        <FormWrapper model={this.state.formEdit} labelWidth="80">
          <Form.Item label="审核人"><Input
            placeholder="请输入审核人"
            value={this.state.form.reviewer}
            onChange={this.getReviewer.bind(this)}
          /></Form.Item>
          <Form.Item label="审核状态"><Input
            placeholder="请输入审核状态"
            value={this.state.form.reviewStatus}
            onChange={this.getReviewStatus.bind(this)}
          /></Form.Item>
          <Form.Item label="审核备注"><Input
            type="textarea"
            autosize={{ minRows: 2, maxRows: 4}}
            placeholder="请输入审核备注"
            value={this.state.formEdit.reviewNote}
            onChange={this.getReviewNote.bind(this)}
          /></Form.Item>
          <Form.Item>
            <Button type="warning" size="large" onClick={() => {global.history.go(-1)}}>返回</Button>
            <Button type="success" size="large" onClick={this.submit.bind(this)}>提交</Button>
          </Form.Item>
        </FormWrapper>
      </div>
    )
  }
  // 提交回调
  submit () { console.log('submti') }
  // getter
  getReviewer (val) { this.setState({ formEdit: Object.assign({}, this.state.formEdit, {reviewer: val}) }) }
  getReviewStatus (val) { this.setState({ formEdit: Object.assign({}, this.state.formEdit, {reviewStatus: val}) }) }
  getReviewNote (val) { this.setState({ formEdit: Object.assign({}, this.state.formEdit, {reviewNote: val}) }) }
}
export default withRouter(operatingRecord)